<template>
  <a-modal class="ZZ-box" v-model="ZZDetailsshow" :title="ZZList.name" @ok="handleOk">
    <ul>
      <li>证书名称：<span>{{ ZZList.name }}</span></li>
      <li>证书编号：<span>{{ ZZList.code }}</span></li>
      <li>发证机构名称：<span>{{ ZZList.mechanism }}</span></li>
      <li>发证日期：<span>{{ ZZList.issueDate }}</span></li>
      <li>证书有效期：<span>{{ ZZList.validityDate }}</span></li>
      <li>证书概述：<span>{{ ZZList.desc }}</span></li>
      <li>证书图片：
        <viewer :images="[ZZList.attachment]">
          <div class="clearfix">
            <div class="img-box f-left">
              <img :src="ZZList.attachment" alt="" />
            </div>
          </div>
        </viewer>
      </li>
    </ul>
    <template slot="footer">
      <a-button type="primary" @click="handleOk">关闭</a-button>
    </template>
  </a-modal>
</template>
<script>
export default {
  props: {
    ZZDetailsshow: {
      type: Boolean,
      default: false
    },
    ZZList: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      // 获取图片地址

    }
  },
  methods: {
    handleOk () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="less" scoped>
.ZZ-box {
  widows: 100%;

  ul {
    li {
      font-size: 16px;
      border-bottom: 1px dashed #dcdfe6;
      line-height: 24px;
      padding: 16px 0 8px 0;
    }
  }

  .img-box {
    width: 150px;
    height: 120px;
    text-align: center;
    // border: 1px solid #000;
    margin-right: 5px;

    img {
      width: auto;
      height: 100%;
    }
  }
}
</style>